<template></template>

<script>
export default {
  props: ["father", "paths"],
  mounted() {
    // 右滑返回
    const father = document.querySelector(this.father);
    father.ontouchstart = (e) => {
      // 记录用户鼠标点击的位置  自身边距减去父盒子的左边距
      const x = e.changedTouches[0].pageX - father.offsetLeft;
      document.ontouchmove = (e) => {
        // console.log(e.changedTouches[0].pageX);
        // 记录鼠标移动时产生的位置信息
        const xx = e.changedTouches[0].pageX;
        // 父盒子的边距同步为 鼠标移动的边距减去鼠标点击时的边距
        father.style.left = xx - x + "px";
        // 左边距大于200 返回
        if (parseInt(father.style.left) > 150) {
          this.$toast({
            message: "返回",
          });
          this.$router.push(this.paths);
          // 不能右滑
        } else if (father.style.left < "0px") {
          father.style.left = "0px";
        } else if (
          parseInt(father.style.left) > 0 &&
          parseInt(father.style.left) < 150
        ) {
          this.$toast({
            message: "右滑返回",
            position: "top",
          });
        }
        father.addEventListener("touchend", () => {
          document.ontouchmove = null;
        });
      };
    };
  },
};
</script>

<style lang="less" scoped>
</style>